<template>
	<w-container :showCopyright="false" :hasNav="false" :isTabPage="false" :loading="loading" id='product-details'>
		<view class="pa-16">
			<z-common-box padding="12px 20px">
				<view class="flex flex-ai-center flex-js-sb">
					<view class="font-size-14 font-color-666">
						<text>您已成功获得助力 </text>
						<text class="font-color-theme ml-6 mr-6">{{success_count}}</text>
						<text> 次 </text>
					</view>
					<view @click="shareShow = true" class="border pa-6 br-8 font-size-14 font-color-theme">分享图片</view>
				</view>
			</z-common-box>
			<view class="mt-16 mb-16 font-color-theme_title">上传图片:</view>
			<z-upload :disabled="share_number == 0" :filesList="fileList3" @uploadSuccess="uploadSuccess" @delete="deletePic" multiple :maxCount="3"></z-upload>
			<view class="font-color-999 font-size-14 mt-16">上传截图，图片大小限制5M内，数量3张</view>
			<view class="flex flex-dir-col align-center flex-js-center mt-16">
				<view class="flex flex-ai-center flex-js-sb font-size-12 mb-16" style="color: #979997;">
					<view class="zhanbi2">日期</view>
					<view class="zhanbi">上传图片数量</view>
					<view class="zhanbi1">审核结果</view>
				</view>
				<view v-for="(item,index) in list" :key="index" :class="index%2 == 0?'bg_jb':''" class="item_box flex flex-ai-center flex-js-sb font-size-13 font-color-theme_title">
					<view class="zhanbi2 font-size-12">{{item.time}}</view>
					<view class="zhanbi">{{item.images_num}}</view>
					<view v-if="item.status == 1" class="zhanbi1 font-color-theme">通过</view>
					<view v-if="item.status == 0" class="zhanbi1">待审核</view>
					<view v-else-if="item.status == 2" class="zhanbi1">无效</view>
				</view>
				<u-empty marginTop="20" v-if="!list.length" text="暂无分享记录"></u-empty>
			</view>
			<z-common-box boxShadow marginTop="50rpx">
				<view class="flex flex-ai-center mb-12">
					<u-icon name="/static/img/icon/icon_cp.png" size="15"></u-icon>
					<view class="font-color-theme_title ml-10 font-size-16 font-w-bold">分享社群规则</view>
				</view>			
				<u-parse :content="handleLang(config.draw_share_assrule)"></u-parse>
			</z-common-box>
			<!-- <view class="bg_jb_theme br-33 font-color-white text-center ptb-12 mt-16">提交</view>		 -->			
		</view>
		<u-gap height="100"></u-gap>
		<z-buttom-box padding="30rpx 0 0 5%" bgColor="#f5f5f5">
			<w-button @click.native="addshareSubmit" v-if="share_number"  style="width: 95%;" :disabled="!form.images.length">提交</w-button>
			<w-button v-else disabled style="width: 95%;" >暂无分享次数</w-button>
		</z-buttom-box>
		<z-model v-model="shareShow" :showTitle="false" is_show_close bgColor="transparent">
			<image slot="content" :src="$ossUrl + config.draw_share_assimage" width="100%" mode="widthFix" style="width: 100%;"></image>
			<w-button @click="saveImage" slot="btn" style="width: 50%;margin: 0 auto 50rpx;">复制图片</w-button>
		</z-model>
		<!-- <u-popup :show="shareShow" mode="center" bgColor="transparent">
			<view class="response" style="width: 600rpx; height: 720rpx">
				<l-painter isH5PathToBase64 v-if="isShowPainter" isRenderImage :board="base" @success="success"
					type="2d" />
				<view v-else class="flex align-center justify-center response">
					<u-image width="600rpx" height="720rpx" :src="path"></u-image>
				</view>	
				<view class="closeBtn" @click="shareShow = false">
					<u-icon name="close" size="30"></u-icon>
				</view>
			</view>
			<view @click="saveImage" class="bg_jb_theme ptb-14 br-33 font-color-white text-center" style="width: 167.5px;margin: 32px auto;">复制图片</view>
		</u-popup> -->
	</w-container>	
</template>

<script>
	import { addshare,sharelist } from "@/api/draw/index.js"
	import lPainter from "@/components/lime-painter/";
	import { mapState } from "vuex"
	export default {
		components: {
			lPainter,
		},
		data() {
			return {
				shareShow:false,
				loading:false,
				fileList3:[],
				path: "",
				form:{
					images:[]
				},
				share_number:10,
				list:[],
				success_count:0,
				isShowPainter: true,
				base: {
					width: "600rpx",
					height: "720rpx",
					borderRadius: "10rpx",
					overflow: "hidden",
					views: [{
							type: "image",
							src: `/static/img/bg/share_bg.png`,
							css: {
								left: "0",
								top: "0",
								width: "600rpx",
								height: "720rpx",
							},
						},
						{
							type: "image",
							src: "/static/img/bg/quiz-header-bg.png",
							// mode: "aspectFit",
							css: {
								left: "30rpx",
								top: "100rpx",
								width: "540rpx",
								height: "300rpx",
							},
						},
						{
							type: "text",
							text: "牛归活动名称", //标题 1
							css: {
								top: "430rpx",
								left: "38rpx",
								color: "#222",
								fontWeight: "bold",
								fontSize: "40rpx",
							}
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "38rpx",
								width:"60rpx",
								height:"32rpx",
								background:"#25406F",
								radius:"4px 0px 0px 4px"
							}
						},
						{
							type: "text",
							text: "限量 ", //标题 1
							css: {
								top: "490rpx",
								left: "45rpx",
								color: "#FEDCC7",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "98rpx",
								width:"160rpx",
								height:"32rpx",
								background:"#FEDCC7",
								radius:"0px 4px 4px 0px"
							}
						},
						{
							type: "text",
							text: "1000份", //标题 1
							css: {
								top: "490rpx",
								left: "125rpx",
								color: "#462A18",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "280rpx",
								width:"82rpx",
								height:"32rpx",
								background:"linear-gradient(84deg, #FF2D61 0%, #FF3214 100%)",
								radius:"4px"
							}
						},
						{
							type: "text",
							text: "抽签购", //标题 1
							css: {
								top: "490rpx",
								left: "290rpx",
								color: "#fff",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "text",
							text: "立即抽签即有机会赢得", //标题 1
							css: {
								top: "560rpx",
								left: "38rpx",
								color: "#222",
								fontWeight: "bold",
								fontSize: "28rpx",
							},
						},
						{
							type: "text",
							text: "[牛归艺数 爱吃小盆友]", //标题 2
							css: {
								top: "600rpx",
								left: "38rpx",
								color: "#666666",
								fontWeight: "bold",
								fontSize: "20rpx",
							},
						},
						{
							type: "text",
							text: "截图分享", //标题 2
							css: {
								top: "630rpx",
								left: "38rpx",
								color: "#999",
								fontSize: "20rpx",
							},
						},
						{
							type: "image",
							src: "/static/img/bg/erweima.png", //标题 2
							css: {
								width:"122rpx",
								height:"122rpx",
								top: "550rpx",
								left: "420rpx",
								color: "#999",
								fontSize: "20rpx",
							},
						},
					],
				},
			}
		},
		onLoad({data}) {
			this.form = {...JSON.parse(data),...this.form}
			if(this.form.share_number == 0) this.share_number = this.form.share_number
			delete this.form.share_number
			this.getList()
		},
		watch:{
			fileList3(list){
				let arr = []
				list.map( m => {
					arr.push(m.url)
				})
				this.form.images = arr
			}			
		},
		computed:{
			...mapState('config',{
				config(status) {
					return status.info
				}
			})
		},
		methods: {
			addshareSubmit(){
				let form = this.form
				if(!form.images.length) return this.$u.toast('请上传分享图片');
				if(this.is_submit) return
				this.is_submit = true
				addshare(form).then( res => {
					this.$u.toast(res.msg);
					this.fileList3 = []
					setTimeout(() => this.getList(),1000)
				}).catch( err => {})
			},
			getList(){
				const { goods_id,goods_type } = this.form
				sharelist({goods_id,goods_type}).then( res => {
					this.list = res.data.list
					this.success_count = res.data.success_count
				}).catch( err => {})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList3${event.name}`].splice(event.index, 1)
			},
			//上传成功之后的处理
			uploadSuccess(fileList){
				this.fileList3 = fileList
			},
			saveImage() {
				this.$tools.saveImage(this.$ossUrl + this.config.draw_share_assimage)
				this.shareShow = false
			},
			success(event) {
				this.path = event;
				uni.setStorageSync("sharePath", event);
				this.isShowPainter = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.zhanbi {
		width: 25%;
		text-align: center;
	}
	.zhanbi1 {
		width: 20%;
		text-align: center;
	}
	.zhanbi2 {
		width: 35%;
		text-align: center;
	}
	.item_box {
		width: 100%;
		height: 80rpx;
	}
	.bg_jb {
		background: linear-gradient(90deg, #91EDF3 0%, rgba(145,243,243,0) 100%);
	}
	.closeBtn {
		opacity: 0.5;
		position: absolute;
		top: 24rpx;
		right: 20rpx;
	}
</style>
